<template>
    <div class="stats-container">
        <!-- 第一排统计卡片 -->
        <div class="stats-row">
            <div class="stat-card">
                <div class="stat-icon">📊</div>
                <div class="stat-content">
                    <div class="stat-label">今日活跃用户数</div>
                    <div class="stat-value">{{ todayStats.activeUsers }}</div>
                </div>
            </div>
            <div class="stat-card has-percent">
                <div class="stat-icon">👥</div>
                <div class="stat-content">
                    <div class="stat-label">今日新增用户数</div>
                    <div class="stat-value">
                        {{ todayStats.newUsers }}
                        <span class="stat-percent">
                            {{ newUsersPercent }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">🎯</div>
                <div class="stat-content">
                    <div class="stat-label">今日新功能使用</div>
                    <div class="stat-value">{{ todayStats.featureUsedNewUsers }}<span class="stat-percent">
                            {{ featureUsedNewUsersPercent }}
                        </span></div>
                </div>
            </div>
            <div class="stat-card  ">
                <div class="stat-icon">💳</div>
                <div class="stat-content">
                    <div class="stat-label">今日订阅用户数</div>
                    <div class="stat-value">
                        {{ todayStats.subscribeUsers }}

                    </div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">💰</div>
                <div class="stat-content">
                    <div class="stat-label">今日买币单量</div>
                    <div class="stat-value">{{ todayStats.buyTokenUsers }}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">🪙</div>
                <div class="stat-content">
                    <div class="stat-label">今日系统赠币</div>
                    <div class="stat-value">{{ momoStats.todayGrantMomo }}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">🔋</div>
                <div class="stat-content">
                    <div class="stat-label">今日充值币</div>
                    <div class="stat-value">{{ momoStats.todayRechargeMomo }}</div>
                </div>
            </div>
            <div class="stat-card">
                <div class="stat-icon">💼</div>
                <div class="stat-content">
                    <div class="stat-label">全用户可用余额</div>
                    <div class="stat-value">{{ momoStats.totalAvailableMomo }}</div>
                </div>
            </div>
        <!-- </div> -->
        <!-- 第二排用户分类统计 -->
        <!-- <div class="stats-row"> -->
            <div class="stat-card">
                <div class="stat-icon">🏆</div>
                <div class="stat-content">
                    <div class="stat-label">总用户</div>
                    <div class="stat-value">{{ userStats.totalUsers }}</div>
                </div>
            </div>
            <div class="stat-card has-percent">
                <div class="stat-icon">👤</div>
                <div class="stat-content">
                    <div class="stat-label">普通会员</div>
                    <div class="stat-value">{{ userStats.normalMembers }}

                        <span class="stat-percent">
                            {{ normalMembersPercent }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="stat-card has-percent">
                <div class="stat-icon">⏰</div>
                <div class="stat-content">
                    <div class="stat-label">临时会员</div>
                    <div class="stat-value">{{ userStats.tempMembers }}

                        <span class="stat-percent">
                            {{ tempMembersPercent }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="stat-card has-percent">
                <div class="stat-icon">🎯</div>
                <div class="stat-content">
                    <div class="stat-label">体验会员</div>
                    <div class="stat-value">{{ userStats.trialMembers }}
                        <span class="stat-percent">
                            {{ trialMembersPercent }}
                        </span>
                    </div>
                </div>
            </div>
            <div class="stat-card has-percent">
                <div class="stat-icon">💎</div>
                <div class="stat-content">
                    <div class="stat-label">正式会员</div>
                    <div class="stat-value">{{ userStats.formalMembers }}
                        <span class="stat-percent">
                            {{ formalMembersPercent }}
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 近30日新增活跃用户折线图 -->
        <div class="chart-container">
            <h3 class="chart-title">近30日新增活跃用户趋势</h3>
            <div class="chart-wrapper" ref="chart1" style="width: 100%; height: 400px;"></div>
        </div>
        <div class="chart-container">
            <h3 class="chart-title">近30日 MOMO币充值/赠送趋势</h3>
            <div class="chart-wrapper" ref="chartMomo" style="width:100%;height:400px;"></div>
        </div>
        <!-- 当日功能使用统计表格 -->
        <div class="table-container">
            <h3 class="table-title">功能使用统计</h3>
            <table class="stats-table">
                <thead>
                    <tr>
                        <th>功能类型</th>
                        <th>今日使用人数</th>
                        <th>今日总使用量</th>
                        <th>今日总使用次数</th>
                        <th>今日人均使用量</th>
                        <th>今日人均使用次数</th>
                        <th>累计总使用量</th>
                        <th>累计总使用次数</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in todayUsageStats" :key="item.featureType">
                        <td>{{ getFeatureTypeName(item.featureType) }}</td>
                        <td>{{ item.userCount }}</td>
                        <td>
                            {{ item.totalUsageAmount }}
                            <span v-if="isMinuteFeature(item.featureType) && item.totalUsageAmount > 0">/分</span>
                        </td>
                        <td>{{ item.totalUsageCount }}</td>
                        <td>
                            {{ item.avgUsageAmount }}
                            <span v-if="isMinuteFeature(item.featureType) && item.avgUsageAmount > 0">/分</span>
                        </td>
                        <td>{{ item.avgUsageCount }}</td>
                        <!-- 新增累计总用量 -->
                        <td>
                            <template v-if="isMinuteFeature(item.featureType)">
                                {{ formatMinuteSmart(item.totalAllUsageAmount) }}
                            </template>
                            <template v-else>
                                {{ item.totalAllUsageAmount }}
                            </template>
                        </td>
                        <!-- 新增累计总次数 -->
                        <td>{{ item.totalAllUsageCount }}</td>
                    </tr>
                </tbody>
            </table>
        </div>

        <!-- 近30日功能使用统计折线图 -->
        <div class="chart-container">
            <h3 class="chart-title">近30日功能使用量</h3>
            <div class="chart-wrapper" ref="chart2" style="width: 100%; height: 400px;"></div>
        </div>
        <div class="chart-container">
            <h3 class="chart-title">近30日各功能消耗MOMO币趋势</h3>
            <div class="chart-wrapper" ref="chartMomoConsume" style="width: 100%; height: 400px;"></div>
        </div>
    </div>
</template>

<script>

import { dashboardUserStats, todayCount, getTodayUsageStats, getUsageStatsTrend } from "@/api/Transir";
import axios from 'axios'

export default {
    name: "TestMore",
    data() {
        return {
            trendUsageStats: {
                dateArr: [],
                trends: []
            },
            chart1: null,
            chart2: null,
            todayStats: {
                activeUsers: 0,
                newUsers: 0,
                subscribeUsers: 0, // 订阅/买币可以后端再加
                buyTokenUsers: 0
            },
            userStats: {
                totalUsers: 0,
                normalMembers: 0,
                tempMembers: 0,
                trialMembers: 0,
                formalMembers: 0
            },
            // 折线图数据
            statTrends: {
                dateArr: [],
                newArr: [],
                activeArr: []
            },
            todayUsageStats: [

            ],
            momoStats: {
                todayGrantMomo: 0,
                todayRechargeMomo: 0,
                totalAvailableMomo: 0,
                last30Trend: []
            },
            chartMomo: null,
            momoConsumeTrend: {
                dateArr: [],
                trends: []
            },
            chartMomoConsume: null
        }
    },
    computed: {
        featureUsedNewUsersPercent() {
            const featureUsedNewUsers = this.todayStats.featureUsedNewUsers;
            const newUsers = this.todayStats.newUsers;
            if (!featureUsedNewUsers || !newUsers) return '--';
            return `${((featureUsedNewUsers / newUsers) * 100).toFixed(2)}%`;
        },
        // 新注册用户数占今日活跃用户数的百分比
        newUsersPercent() {
            const active = this.todayStats.activeUsers;
            const newUsers = this.todayStats.newUsers;
            if (!active || !newUsers) return '--';
            return `${((newUsers / active) * 100).toFixed(2)}%`;
        },

        // 各类型会员占比（相对于总用户）
        normalMembersPercent() {
            const total = this.userStats.totalUsers;
            const count = this.userStats.normalMembers;
            if (!total || !count) return '--';
            return `${((count / total) * 100).toFixed(2)}%`;
        },
        tempMembersPercent() {
            const total = this.userStats.totalUsers;
            const count = this.userStats.tempMembers;
            if (!total || !count) return '--';
            return `${((count / total) * 100).toFixed(2)}%`;
        },
        trialMembersPercent() {
            const total = this.userStats.totalUsers;
            const count = this.userStats.trialMembers;
            if (!total || !count) return '--';
            return `${((count / total) * 100).toFixed(2)}%`;
        },
        formalMembersPercent() {
            const total = this.userStats.totalUsers;
            const count = this.userStats.formalMembers;
            if (!total || !count) return '--';
            return `${((count / total) * 100).toFixed(2)}%`;
        }
    },
    created() {
        this.loadData();
        this.loadUsageTrendData();
        this.loadMomoStats(); // 新增
        this.loadMomoConsumeTrend(); // 新增
    },
    mounted() {
        this.initCharts();
    },
    methods: {
        async loadMomoConsumeTrend() {
            try {
                const { data: res } = await axios.post("https://xiaoshuchengzhang.com/node/Transir/momoConsumeTrend");
                if (res.code === 0 && res.data) {
                    this.momoConsumeTrend = res.data;
                    this.updateMomoConsumeChart();
                }
            } catch (err) {
                this.$message && this.$message.error('获取MOMO币消耗趋势失败');
                this.momoConsumeTrend = { dateArr: [], trends: [] };
            }
        },
        updateMomoConsumeChart() {
            if (!this.chartMomoConsume && this.$refs.chartMomoConsume) {
                this.chartMomoConsume = this.$echarts.init(this.$refs.chartMomoConsume);
            }
            if (!this.chartMomoConsume) return;
            const colorMap = {
                accurate_minute: '#1976d2', // 蓝
                quick_translate_minute: '#388e3c', // 绿
                comic_realtime_minute: '#FFB300', // 橙黄
                redeem_tokens: '#8e24aa', // 紫
                web_capture: '#d84315', // 棕/红褐
                quick_capture: '#00acc1', // 湖蓝
                float_copy: '#f4511e', // 橙红
                quick_text: '#c62828', // 鲜红
                video_export: '#d4af37', // 金黄色
                interpretation_refined: '#FF9800', // 橙色（高亮、精致风格）
                interpretation_quick: '#00BCD4',   // 亮青蓝（快速、醒目风格）
            };
            // 图例中文名map（可根据你现有getFeatureTypeName一起改）
            const labelMap = {
                'accurate_minute': '精准翻译',
                'quick_translate_minute': '快速翻译',
                'comic_realtime_minute': '漫画实时翻译',
                'redeem_tokens': '网页token',
                'web_capture': '网页截图',
                'quick_capture': '快捷截图',
                'float_copy': '悬浮复制屏翻',
                'quick_text': '快捷文字屏翻',
                'video_export': '视频导出',
                'interpretation_refined': '同声传译精翻',
                'interpretation_quick': '同声传译快翻',
                
            };

            this.chartMomoConsume.clear();
            this.chartMomoConsume.showLoading({ text: "加载中...", color: "#409EFF", textColor: "#303133" });
            setTimeout(() => {
                this.chartMomoConsume.hideLoading();
                this.chartMomoConsume.setOption({
                    tooltip: { trigger: "axis" },
                    legend: {
                        data: this.momoConsumeTrend.trends.map(t => labelMap[t.featureType] || t.featureType),
                        top: 30
                    },
                    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: this.momoConsumeTrend.dateArr
                    },
                    yAxis: {
                        type: "value",
                        name: "消耗MOMO币数"
                    },
                    series: this.momoConsumeTrend.trends.map(t => ({
                        name: labelMap[t.featureType] || t.featureType,
                        type: "line",
                        data: t.data,
                        smooth: true,
                        label: { show: true, position: 'top', fontSize: 12 },
                        itemStyle: { color: colorMap[t.featureType] || '#888' },
                        lineStyle: { color: colorMap[t.featureType] || '#888' }
                    }))
                });
            }, 120);
        },
        async loadMomoStats() {
            try {
                const { data: res } = await axios.post('https://xiaoshuchengzhang.com/node/Transir/dashboardMomoStats');
                if (res.code === 0 && res.data) {
                    this.momoStats = res.data;
                    this.updateMomoTrendChart();
                }
            } catch (err) {
                this.$message && this.$message.error('获取MOMO币统计失败');
                this.momoStats = { todayGrantMomo: 0, todayRechargeMomo: 0, totalAvailableMomo: 0, last30Trend: [] };
            }
        },
        updateMomoTrendChart() {
            if (!this.chartMomo && this.$refs.chartMomo) {
                this.chartMomo = this.$echarts.init(this.$refs.chartMomo);
            }
            if (!this.chartMomo) return;
            const dates = (this.momoStats.last30Trend || []).map(d => d.date);
            const recharge = (this.momoStats.last30Trend || []).map(d => d.rechargeAmount);
            const grant = (this.momoStats.last30Trend || []).map(d => d.grantAmount);

            this.chartMomo.clear();
            this.chartMomo.showLoading({ text: '加载中...', color: '#409EFF', textColor: '#303133' });
            setTimeout(() => {
                this.chartMomo.hideLoading();
                this.chartMomo.setOption({
                    tooltip: { trigger: 'axis' },
                    legend: { data: ['充值币', '赠送币'], top: 30 },
                    grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dates
                    },
                    yAxis: { type: 'value', name: 'MOMO币' },
                    series: [
                        {
                            name: '充值币',
                            type: 'line',
                            data: recharge,
                            smooth: true,
                            label: { show: true, position: 'top', fontSize: 12 },
                            itemStyle: { color: '#409EFF' }
                        },
                        {
                            name: '赠送币',
                            type: 'line',
                            data: grant,
                            smooth: true,
                            label: { show: true, position: 'top', fontSize: 12 },
                            itemStyle: { color: '#67C23A' }
                        }
                    ]
                });
            }, 150);
        },
        async loadUsageTrendData() {
            const { data: res } = await axios.post('https://xiaoshuchengzhang.com/node/Transir/usageStatsTrend');
            if (res.code === 0 && res.data) {
                this.trendUsageStats = res.data;
                this.updateUsageStatsChart();
            }
        },
        updateUsageStatsChart() {
            if (!this.chart2 && this.$refs.chart2) {
                this.chart2 = this.$echarts.init(this.$refs.chart2);
            }
            if (!this.chart2) return;
            const colorMap = {
                'accurate_minute': '#1976d2',           // 蓝，高亮
                'quick_translate_minute': '#388e3c',    // 绿
                'comic_realtime_minute': '#FFB300',     // 橙黄
                'redeem_tokens': '#8e24aa',             // 紫色
                'web_capture': '#d84315',               // 棕红
                'quick_capture': '#00acc1',             // 湖蓝
                'float_copy': '#f4511e',                // 橙红
                'quick_text': '#c62828',                // 红
                'video_export': '#d4af37', // 金黄色
                'interpretation_refined': '#FF9800', // 橙色（高亮、精致风格）
                'interpretation_quick': '#00BCD4',   // 亮青蓝（快速、醒目风格）
            };
            // 图例名映射
            const labelMap = {
                'accurate_minute': '精准翻译(分钟)',
                'quick_translate_minute': '快速翻译(分钟)',
                'redeem_tokens': '网页token',
                'web_capture': '网页截图',
                'quick_capture': '快捷截图',
                'float_copy': '悬浮复制屏翻',
                'quick_text': '快捷文字屏翻',
                'comic_realtime_minute': '漫画实时翻译',
                'video_export': '视频导出',
                'interpretation_refined': '同声传译精翻',
                'interpretation_quick': '同声传译快翻',
            };

            this.chart2.clear();
            this.chart2.showLoading({ text: '加载中...', color: '#409EFF', textColor: '#303133' });
            setTimeout(() => {
                this.chart2.hideLoading();

                this.chart2.setOption({
                    // title: { text: "近30日功能使用量", left: "center" },
                    tooltip: { trigger: "axis" },
                    legend: {
                        data: this.trendUsageStats.trends.map(t => labelMap[t.featureType] || t.featureType),
                        top: 30
                    },
                    grid: { left: "3%", right: "4%", bottom: "3%", containLabel: true },
                    xAxis: {
                        type: "category",
                        boundaryGap: false,
                        data: this.trendUsageStats.dateArr
                    },
                    yAxis: {
                        type: "value",
                        name: "使用量"
                    },
                    series: this.trendUsageStats.trends.map(t => ({
                        name: labelMap[t.featureType] || t.featureType,
                        type: "line",
                        data: t.data,
                        smooth: true,
                        label: { show: true, position: 'top', fontSize: 12 },
                        itemStyle: { color: colorMap[t.featureType] || '#888' },
                        lineStyle: { color: colorMap[t.featureType] || '#888' },
                    }))
                });
            }, 150);
        },

        formatMinuteSmart(val) {
            // 为0（或空），直接显示0（不带单位）
            if (!val || Number(val) === 0) return '0';
            val = Number(val);
            if (val >= 60) {
                return (Math.round(val / 60 * 100) / 100) + '/时';
            } else {
                return val + '/分';
            }
        },
        async loadData() {
            try {
                // 1. 请求后端统计数据
                // const res = await dashboardUserStats();
                let { data: res } = await axios.post('https://xiaoshuchengzhang.com/node/Transir/dashboardUserStats');
                if (res.code !== 0) throw new Error(res.msg || '获取统计失败');
                const data = res.data;

                // 2. 绑定卡片
                this.todayStats.activeUsers = data.today.activeUsers;
                this.todayStats.newUsers = data.today.newUsers;
                this.todayStats.featureUsedNewUsers = data.today.featureUsedNewUsers;
                // 如果你接口暂时没返回 subscribeUsers / buyTokenUsers 可写死或隐藏

                this.userStats.totalUsers = data.userStats.total;
                this.userStats.normalMembers = data.userStats.normalMembers;
                this.userStats.tempMembers = data.userStats.tempMembers;
                this.userStats.trialMembers = data.userStats.trialMembers;
                this.userStats.formalMembers = data.userStats.formalMembers;

                // 3. 折线图相关
                const dateArr = [];
                const newArr = [];
                const activeArr = [];
                const featureUsedArr = []; // 新增
                (data.last30Trend || []).forEach(day => {
                    dateArr.push(day.date);   // yyyy-mm-dd
                    newArr.push(day.newUsers);
                    activeArr.push(day.activeUsers);
                    featureUsedArr.push(day.featureUsedNewUsers || 0); // 新增
                });
                this.statTrends = { dateArr, newArr, activeArr, featureUsedArr }; // 新增

                // 4. 更新ECharts数据
                this.updateActiveUsersChart();
                // 5. === 新增部分：请求今日订阅用户数 ===
                const { data: todayCountRes } = await axios.post('https://xiaoshuchengzhang.com/node/Transir/todayCount');
                if (todayCountRes.code === 0 && todayCountRes.data) {
                    // 订阅（DID_RENEW+SUBSCRIBED）
                    this.todayStats.subscribeUsers = todayCountRes.data.subscribeCount || 0;
                    // ONE_TIME_CHARGE
                    this.todayStats.buyTokenUsers = todayCountRes.data.oneTimeChargeCount || 0;
                } else {
                    this.todayStats.subscribeUsers = 0;
                    this.todayStats.buyTokenUsers = 0;
                }
                // 新增
                const { data: usageRes } = await axios.post('https://xiaoshuchengzhang.com/node/Transir/todayUsageStats');
                console.log(usageRes)
                if (usageRes.code === 0 && usageRes.data) {
                    this.todayUsageStats = usageRes.data;
                } else {
                    this.todayUsageStats = [];
                }
            } catch (err) {
                this.$message && this.$message.error(err.message || '统计接口异常');
                console.error('dashboardUserStats接口失败', err);
            }
        },
        updateActiveUsersChart() {
            // 用 this.statTrends 里的数据刷新 chart1
            if (!this.chart1 && this.$refs.chart1) {
                this.chart1 = this.$echarts.init(this.$refs.chart1);
            }
            if (!this.chart1) return;

            const { dateArr, newArr, activeArr, featureUsedArr } = this.statTrends;
            this.chart1.clear();
            this.chart1.showLoading({ text: '加载中...', color: '#409EFF', textColor: '#303133' });
            setTimeout(() => {
                this.chart1.hideLoading();
                this.chart1.setOption({
                    tooltip: { trigger: 'axis' },
                    legend: {
                        data: ['新增用户', '活跃用户', '有实际使用行为'], // 新增
                        top: 30
                    },
                    grid: { left: '2%', right: '3%', bottom: '3%', containLabel: true },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: dateArr
                    },
                    yAxis: { type: 'value' },
                    series: [
                        {
                            name: '新增用户',
                            type: 'line',
                            data: newArr,
                            smooth: true,
                            itemStyle: { color: '#409EFF' },
                            label: {
                                show: true,
                                position: 'top',
                                color: '#409EFF',
                            }
                        },
                        {
                            name: '活跃用户',
                            type: 'line',
                            data: activeArr,
                            smooth: true,
                            itemStyle: { color: '#67C23A' },
                            label: {
                                show: true,
                                position: 'top',
                                color: '#67C23A',
                            }
                        },
                        // 新增
                        {
                            name: '有实际使用行为',
                            type: 'line',
                            data: featureUsedArr,
                            smooth: true,
                            itemStyle: { color: '#FF9800' },
                            label: {
                                show: true,
                                position: 'top',
                                color: '#FF9800',
                            }
                        }
                    ]
                });
            }, 200);
        },
        getFeatureTypeName(type) {
            const typeMap = {
                'accurate_minute': '精准翻译',
                'quick_translate_minute': '快速翻译',
                'redeem_tokens': '网页token',
                'web_capture': '网页截图',
                'quick_capture': '快捷截图',
                'float_copy': '悬浮复制屏翻',
                'quick_text': '快捷文字屏翻',
                'comic_realtime_minute': '漫画实时翻译',
                'video_export': '视频导出',
                'interpretation_refined': '同声传译精翻',
                'interpretation_quick': '同声传译快翻',
            };
            return typeMap[type] || type;
        },

        initCharts() {
            if (!this.chart1 && this.$refs.chart1) {
                this.chart1 = this.$echarts.init(this.$refs.chart1);
            }
            this.updateActiveUsersChart();
            // 去掉模拟，直接调用下面
            this.updateUsageStatsChart();
        },



        initUsageStatsChart() {
            if (!this.chart2) {
                this.chart2 = this.$echarts.init(this.$refs.chart2);
            }
            this.chart2.clear();
            this.chart2.showLoading({ text: '加载中...', color: '#409EFF', textColor: '#303133' });

            setTimeout(() => {
                this.chart2.hideLoading();
                this.chart2.setOption({
                    title: {
                        text: '近30日功能使用人数趋势',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['精准翻译', '快速翻译', '网页截图', '快速截图', '浮动复制',],
                        top: 30
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: this.getLast30Days()
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name: '精准翻译',
                            type: 'line',
                            data: this.generateRandomData(30, 100, 300),
                            smooth: true
                        },
                        {
                            name: '快速翻译',
                            type: 'line',
                            data: this.generateRandomData(30, 200, 600),
                            smooth: true
                        },
                        {
                            name: '网页截图',
                            type: 'line',
                            data: this.generateRandomData(30, 80, 350),
                            smooth: true
                        },
                        {
                            name: '快速截图',
                            type: 'line',
                            data: this.generateRandomData(30, 150, 450),
                            smooth: true
                        },
                        {
                            name: '浮动复制',
                            type: 'line',
                            data: this.generateRandomData(30, 300, 800),
                            smooth: true
                        }
                    ]
                });
            }, 500);
        },

        getLast30Days() {
            const days = [];
            for (let i = 29; i >= 0; i--) {
                const date = new Date();
                date.setDate(date.getDate() - i);
                days.push(date.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' }));
            }
            return days;
        },

        generateRandomData(count, min, max) {
            const data = [];
            for (let i = 0; i < count; i++) {
                data.push(Math.floor(Math.random() * (max - min + 1)) + min);
            }
            return data;
        },
        isMinuteFeature(type) {
            return ['accurate_minute', 'quick_translate_minute', 'comic_realtime_minute','interpretation_refined','interpretation_quick'].includes(type);
        },
    }
};
</script>

<style lang="scss" scoped>
.stats-container {
    padding: 20px;
    background-color: #f5f5f5;
    min-height: 100vh;
}

.stats-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.stat-card {
    flex: 1;
    min-width: 300px;
    background: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    transition: transform 0.3s ease;

    &:hover {
        transform: translateY(-5px);
    }
}

.stat-icon {
    font-size: 2.5em;
    margin-right: 15px;
    opacity: 0.8;
}

.stat-content {
    flex: 1;
}

.stat-label {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
}

.stat-value {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    position: relative;
    display: flex;
    align-items: flex-end;
    position: relative;
}

.stat-percent {
    position: absolute;
    right: 0px;
    bottom: -7px;
    font-size: 12px;
    padding: 1px 8px;
    margin-left: 10px;
    font-size: 13px;
    color: #fff;
    background: #1b1464;
    border-radius: 10px 10px 10px 10px/16px 16px 16px 16px;
    padding: 3px 10px 2px 10px;
    font-weight: 500;
    line-height: 1;
}

.stat-card.has-percent .stat-value {
    align-items: flex-end;
}

.chart-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.chart-title {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.chart-wrapper {
    background: #fafafa;
    border-radius: 4px;
}

.table-container {
    background: white;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.table-title {
    margin: 0 0 20px 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    th {
        background-color: #409EFF;
        color: white;
        padding: 12px;
        text-align: left;
        font-weight: 600;
    }

    td {
        padding: 12px;
        border-bottom: 1px solid #eee;
        color: #333;
    }

    tr:hover {
        background-color: #f8f9fa;
    }

    tr:last-child td {
        border-bottom: none;
    }
}

@media (max-width: 768px) {
    .stats-row {
        flex-direction: column;
    }

    .stat-card {
        min-width: auto;
    }
}
</style>